<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>娱管家</title>  
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="">
	<meta http-equiv="content-security-policy">
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!-- 微信分享 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul,ol,li{
			list-style: none;
		}
		body{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.8);
		}
		.signInSuccess_main{
			width: 5.6rem;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0.1rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			padding: 0.35rem 0.2rem 0.24rem;
		}
		.userinfo{
			display: flex;
			align-items: center;
		}
		.user_head{
			width: 0.74rem;
			height: 0.74rem;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 0.1rem;
		}
		.user_head img{
			width: 100%;
			height: 100%;
			display: block;
		}
		.user_right{
			width: 3.88rem;
		}
		.user_right>p{
			font-size: 0.22rem;
			color: #333;
			margin-bottom: 0.1rem;
		}
		.detailText{
			background-color: #e0e0e0;
			border-top-right-radius: 0.04rem;
			border-bottom-left-radius: 0.04rem;
			border-bottom-right-radius: 0.04rem;
			position: relative;
			padding: 0.04rem 0.04rem 0.04rem 0.1rem;
		}
		.detailText::before{
			content:"";
			width: 0;
			height: 0;
			display: block;
			position: absolute;
			top: -0.08rem;
			left: -0.08rem;
			border-top: 0.08rem solid #e0e0e0;
			border-left: 0.08rem solid transparent;
			border-right: 0.08rem solid transparent;
			border-bottom: 0.08rem solid transparent;
			transform: rotate(-135deg);
		}
		.detailText p{
			color: #666;
			font-size: 0.24rem;
		}
		.welcome{
			font-size: 0.24rem;
			color: #f00;
			text-align: center;
			margin: 0.2rem 0;
		}
		.pro_img{
			text-align: center;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 0.2rem;
		}
		.pro_img img{
			max-width: 100%;
			max-height: 100%;
		}
		.pro_bottom{
			display: flex;
			justify-content: space-between;
			font-size: 0.2rem;
		}
		.pro_bot_left{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.pro_detail{
			color: #000;
		}
		.pro_bot_right{
			width: 2.8rem;
		    display: flex;
		    flex-direction: column;
    		align-items: center;
		}
		.pro_bot_right p{
			margin-bottom: 0.08rem;
			color: #999;
		}
		.pro_bot_right img{
			width: 1.24rem;
			height: 1.24rem;
			display: block;
		}
		.pro_price p:nth-child(1){
			text-decoration: line-through;
		}
		.pro_price p:nth-child(2){
			color: #f00;
		}
	</style>
</head>
<body>
	<main class="signInSuccess_main">
		<div class="userinfo">
			<div class="user_head">
				<img src="" alt="" class="headimg">
			</div>
			<div class="user_right">
				<p>用户名1555555</p>
				<div class="detailText">
					<p>恭喜您！获得奥妙洗衣粉一件！</p>
				</div>
			</div>
		</div>
		<p class="welcome">欢迎我的朋友都一起来玩吧~</p>
		<div class="pro_img">
			<img src="" alt="">
		</div>
		<div class="pro_bottom">
			<div class="pro_bot_left">
				<p class="pro_detail">[官方正品]奥妙洗衣粉</p>
				<div class="pro_price">
					<p>原价：29.9</p>
					<p>已有88人成功免费获得此礼品</p>
				</div>
			</div>
			<div class="pro_bot_right">
				<p>长按二维码免费领取</p>
				<img src="images/erweima1.png" alt="">
			</div>
		</div>
	</main>
	<script src="js/base.js"></script>
	<script type="text/javascript">
		var share_link = location.href;
		var share_data = {
	        title: '娱管家',// 设置分享标题
	        desc: '',// 设置分享描述
	        link: share_link,// 设置分享链接
	        img: ''// 分享图片
	    };

	   	var param = GetQueryString("id");
	   	var pro_id = null,user_id=null;
	   	if(param){
	   		pro_id = param.split(',')[0];
	   		user_id = param.split(',')[1];
	   	}
	   	$.ajax({
	   		url: 'http://www.yuzhuli.com/api.php/Api/prizes_share_info',
	   		type: 'POST',
	   		dataType: 'json',
	   		data: {id:pro_id,user_id:user_id},
	   		success:function(res){
	   			$(".headimg").attr("src",res.user.img);
	   			$(".user_right p").html(res.user.nickname);
	   			$(".pro_detail").html("[官方正品]"+res.prizes.title);
	   			$(".pro_price p").eq(0).html("原价"+res.prizes.original_price);
	   			$(".pro_price p").eq(1).html("已有"+res.winning_num+"人成功免费获得此礼品");
	   			$(".detailText p").html("恭喜您！获得！"+res.prizes.title+"一件");
	   			$(".pro_img img").attr("src",res.prizes.list_img);
	   			share_data.title = res.prizes.title;
			    share_data.desc = res.prizes.title;
			    share_data.img = res.prizes.list_img;
			    getWxConfig(ApiList, wxConfigCallback, false);
	   		}
	   	})





	    function GetQueryString(name){
		    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);
		    if(r!=null)return  unescape(r[2]); return null;
		}
	     // 分享
	    function getWxConfig(ApiList, callback, debug) {    		
	        $.ajax({
	            url: 'http://www.yuzhuli.com/api.php/api/wechat_js_config',
	            type: 'POST',
	            dataType: 'json',
	            data: {url: location.href,apis:ApiList,debug:debug},
	        }).done(function (res) {
	        	console.log(res);
	            if (res.s) {
	                var con = res.config;
	                var wxConf = {
	                    debug: debug,
	                    appId: con.appId,
	                    timestamp: con.timestamp,
	                    nonceStr: con.nonceStr,
	                    signature: con.signature,
	                    jsApiList: ApiList
	                };
	                wx.config(wxConf);
	                wx.ready(function () {
	                    callback();
	                });
	            }
	        }).fail(function () {
	            console.log("error");
	        }).always(function () {
	            console.log("complete");
	        });
	    }
	    var ApiList = [
	        'onMenuShareTimeline',
	        'onMenuShareAppMessage',
	        'onMenuShareQQ',
	        'onMenuShareQZone',
	        'onMenuShareWeibo',
	    ];	
	    
	    function wx_share(data, callback) {
	        // 分享到朋友圈
	        wx.onMenuShareTimeline({
	            title: data.title, // 分享标题
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        // 分享给朋友
	        wx.onMenuShareAppMessage({
	            title: data.title, // 分享标题
	            desc: data.desc, // 分享描述
	            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	            imgUrl: data.img, // 分享图标
	            type: '', // 分享类型,music、video或link，不填默认为link
	            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
	            success: function () {
	                // 用户确认分享后执行的回调函数
	            },
	            cancel: function () {
	                // 用户取消分享后执行的回调函数
	            }
	        });
	        wx.onMenuShareQQ({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareQZone({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
			wx.onMenuShareWeibo({
				title: data.title, // 分享标题
				desc: data.desc, // 分享描述
				link: data.link, // 分享链接
				imgUrl: data.img, // 分享图标
				success: function () {
				// 用户确认分享后执行的回调函数
				},
				cancel: function () {
				// 用户取消分享后执行的回调函数
				}
			});
	    }	
	    var shareCallback = function (type, status) {
			
	    }	
	    var wxConfigCallback = function () {
//	    	$("audio")[0].play();
	        wx_share(share_data, shareCallback);	        
	    }	
	    
	    wx.error(function (res) {
	        console.log(JSON.stringify(res));
	        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	    });
	</script>
</body>
</html>
